<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式原理</title>
</head>
<body>
    <div>123123</div>
</body>
<!-- <script type="module" src="./reactive.js"></script> -->
<script type="module">
    import { reactive, effect, computed, toRefs } from './reactive.js'
    const obj = reactive({
        foo: 1,
        bar: {
            b: 'a'
        }
    })
    let count = 0
    effect(() => {
        count = obj.foo * 2
    })
    console.log(count)

    obj.foo = 2
    console.log(count)

    obj.foo = 2
    console.log(obj.foo)

    let count2 = computed(() => {
        return obj.foo * 2
    })
    console.log(count2.value)

    obj.foo = 3
    console.log(count2.value)

    function testToRefs () {
        const student = reactive({
            name: 'xixi',
            age: 19
        })
        return toRefs(student)
    }

    const { name, age } = testToRefs()

    let str = ''
    effect(() => {
        str = name.value + age.value
    })
    console.log(str)

    name.value = 'sq'
    console.log(str)
</script>

</html>